<template>
  <div>
    <!-- <div>{{ formItemLists }}</div> -->
    <div style="text-align: right;padding-bottom: 16px;">
      <!-- <a-button type="primary" @click="addFormItem">新增表单字段</a-button> -->
      <a-tooltip placement="top" title="新增表单字段">
        <a-button
          type="primary"
          icon="plus"
          @click="addFormItem"
          style="margin-right: 8px;"
        />
      </a-tooltip>
      <a-tooltip placement="top" title="表单预览">
        <a-button type="primary" icon="file" @click="previewForm" />
      </a-tooltip>
    </div>

    <a-table
      size="small"
      bordered
      :columns="columns"
      :data-source="formItemLists"
      :pagination="false"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <!-- style="width: 100%;" -->
      <template slot="type" slot-scope="text, record, index">
        <a-select
          v-model.trim="text"
          size="small"
          style="width: 100%;"
          :options="typeLists"
          @change="cellDataHandle(text, record, 'type')"
        ></a-select>
      </template>
      <template slot="formItemLabel" slot-scope="text, record, index">
        <a-input
          v-model.trim="text"
          size="small"
          @change="cellDataHandle(text, record, 'formItemLabel')"
        />
      </template>
      <template slot="field" slot-scope="text, record, index">
        <a-input
          v-model.trim="text"
          size="small"
          @change="cellDataHandle(text, record, 'field')"
        />
      </template>
      <template slot="operateBtn" slot-scope="text, record, index">
        <div></div>
      </template>
    </a-table>

    <PreviewFormDialog
      :openDialog.sync="isPreviewForm"
      :config="previewConfig"
    ></PreviewFormDialog>
  </div>
</template>

<script>
import PreviewFormDialog from "./components/previewFormDialog";

const columns = [
  {
    title: "表单类型",
    align: "center",
    dataIndex: "type",
    width: "180px",
    scopedSlots: { customRender: "type" },
  },
  {
    title: "表单字段名",
    align: "center",
    dataIndex: "field",
    width: "180px",
    scopedSlots: { customRender: "field" },
  },
  {
    title: "表单字段标题",
    align: "center",
    dataIndex: "formItemLabel",
    width: "180px",
    scopedSlots: { customRender: "formItemLabel" },
  },
  {
    title: "操作",
    align: "center",
    dataIndex: "operateBtn",
    width: "auto",
    scopedSlots: { customRender: "operateBtn" },
  },
];

// const formItemLists = [
//   {
//     rowId: 0,
//     type: 'input',
//     field: '',
//     formItemLabel: '',
//   },
// ];

const typeLists = [
  {
    label: "单行输入框",
    value: "input",
  },
  {
    label: "多行输入框",
    value: "textarea",
  },
  {
    label: "下拉框",
    value: "select",
  },
  {
    label: "单选框",
    value: "radio",
  },
  {
    label: "图片上传",
    value: "upload",
  },
];

export default {
  name: "assembleTemplateNew",
  components: {
    PreviewFormDialog,
  },
  model: {
    prop: "formLists",
    event: "getFormLists",
  },
  props: {
    formLists: Array,
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      isPreviewForm: false,
      previewConfig: {
        rule: [],
        option: {},
      },
      columns: columns,
      // formItemLists: formItemLists,
      formItemLists: [],
      typeLists: typeLists,
      defaultFormItem: {
        // rowId: 0,
        type: "input",
        field: "",
        formItemLabel: "",
      },
    };
  },
  computed: {},
  watch: {
    formItemLists: {
      immediate: false,
      deep: true,
      handler: function(newVal, oldVal) {
        this.previewConfig.rule = [...newVal];
        this.$emit("getFormLists", [...newVal]);
      },
    },
  },
  methods: {
    previewForm() {
      this.isPreviewForm = true;
    },
    // addFormItem() {
    //   let lastRowId = this.formItemLists.find((item, index) => index == this.formItemLists.length - 1).rowId;
    //   let { rowId, ...rest } = this.defaultFormItem;
    //   this.formItemLists.push({ rowId: lastRowId + 1, ...rest });
    // },
    addFormItem() {
      this.formItemLists = [...this.formItemLists, { ...this.defaultFormItem }];
    },
    cellDataHandle(newValue, record, objKey) {
      let rowId = record.rowId;
      this.formItemLists.forEach((item) => {
        if (item.rowId == rowId) {
          item[objKey] = newValue;
        }
      });
    },
    createFormHandle() {
      this.rule = this.formItemLists.map((item) => {
        let { formItemLabel, ...rest } = item;
        return {
          title: formItemLabel,
          ...rest,
        };
      });
    },
  },
  mounted() {
    this.formItemLists = [{ ...this.defaultFormItem }];
    this.$emit("getFormLists", [{ ...this.defaultFormItem }]);
  },
 mounted() {
    // getRoleId(this);
    // this.defaultFormItem = { ...formItemLists[0] };
    // this.previewConfig.rule = this.formItemLists;
  },
};
</script>

<style scoped="scoped" lang="less"></style>
